<template>
  <Layout :siderCollapsed="inlineCollapsed">
    <Sider>
      <Menu
        :datas="menuData"
        class="h-menu-white"
        :inlineCollapsed="inlineCollapsed"
        ref="menu"
        @select="triggerSelect"
      ></Menu>
      <!-- <li>
        <router-link to="/user/profile">个人信息</router-link>
      </li>
      <li>
        <router-link to="/user/changePassword">修改密码</router-link>
      </li>
      <li>
        <router-link to="/user/destroy">注销用户</router-link>
      </li>
      <li>
        <a @click="logout">退出登录</a>
      </li> -->
    </Sider>
    <Layout>
      <HHeader>
        <Button icon="h-icon-menu" @click="collapse"></Button>
      </HHeader>
      <Content>
        <router-view />
      </Content>
      <HFooter>Footer</HFooter>
    </Layout>
  </Layout>
  <!-- <div>
        <div class="left">
            <li><router-link to="/user/profile">个人信息</router-link></li>
            <li><router-link to="/user/changePassword">修改密码</router-link></li>
            <li><router-link to="/user/destroy">注销用户</router-link></li>
            <li> <a @click="logout">退出登录</a></li>
        </div>
        <div class="content">
            <router-view/>
        </div>
  </div>-->
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      inlineCollapsed: false,
      menuData: [
        {
          title: "个人信息",
          key: "/user/profile",
          icon: "h-icon-user"
        },
        {
          title: "修改密码",
          key: "/user/changePassword",
          icon: "h-icon-info"
        },
        {
          title: "销户",
          key: "/user/destroy",
          icon: "h-icon-close"
        },
        {
          title: "退出登录",
          key: "logout",
          icon: "icon-power"
        }
      ]
    };
  },
  methods: {
    collapse() {
      this.inlineCollapsed = !this.inlineCollapsed;
      this.$refs.sider.width = "60px";
    },
    triggerSelect(menu) {
      let key = menu.key;
      if (key === "logout") {
        //如果key等于logout的时候，让它到动态logout方法中去
        this.logout();
      } else if (this.$route.path !== key) {
        // 如果当前路由跟key相同，那么就不要再push，因为push的目标更当前路由相同，会报错。
        this.$router.push(key);
      }
    },

    logout() {
      axios
        .post("/api/logout")
        .then(response => {
          this.$router.push("/login");
        })
        .catch(response => {
          //console.log(response);
          alert("退出登录出现问题");
        });
    }
  }
};
</script>

<style scoped>
.h-menu-white{
  color: black;
}
</style>